// 封装格式化时间函数，支持 Date 和 string 格式的时间，可选参数，转换成功 10:10:10 时分秒
const format = (date?: Date | string):string => {
    if (!date) date = new Date()
    if (typeof date === 'string') date = new Date(date)
    const h = date.getHours();
    const m = date.getMinutes();
    const s = date.getSeconds();
    return `${h}:${m}:${s}`;
}

// 定义访问记录单项 对象 类型，定义访问记录 列表 类型，需要存储在本地的 key 字面量类型
// 定义单项的类型
type Data = {
    count:number,
    time:string
}

// 定义访问记录

// type List = Data[]
type List = Array<Data>

// 需要存储在本地的 key 字面量类型

const KEY = 'ts-demo-data'

// 封装获取访问历史记录函数，返回类型是 记录列表
const getData = () => {
  const str = localStorage.getItem(KEY) || '[]'

 return JSON.parse(str) as List
}


// 封装修改访问历史记录函数

const updateData = ():void => {
    const list = getData()

    const lastItem = list[list.length - 1 ]

    list.push({
        count: lastItem ? lastItem.count + 1  : 1,
        time: format()
    })

    localStorage.setItem(KEY,JSON.stringify(list))
}

// 封装一个展示访问历史记录函数，且调用

const render = () => {
    //先获取当前时间
    updateData()

    //获取访问记录列表
    const data = getData()

    const app = document.querySelector('#app') as HTMLDivElement;

    app.innerHTML = data.map(item => `次数：${item.count}，时间：${item.time}`).join('<br/>')
}


render()

